import React from 'react';
import { Card, Table, Tag, Button, Space } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface DataType {
    key: string;
    name: string;
    permissions: string[];
    users: number;
}

const RolesPage = () => {
    const columns: ColumnsType<DataType> = [
        {
            title: '角色名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '权限',
            key: 'permissions',
            dataIndex: 'permissions',
            render: (_, { permissions }) => (
                <>
                    {permissions.map(permission => (
                        <Tag color="blue" key={permission}>
                            {permission}
                        </Tag>
                    ))}
                </>
            ),
        },
        {
            title: '用户数量',
            dataIndex: 'users',
            key: 'users',
        },
        {
            title: '操作',
            key: 'action',
            render: () => (
                <Space size="middle">
                    <Button type="link">编辑</Button>
                    <Button type="link" danger>删除</Button>
                </Space>
            ),
        },
    ];

    const data: DataType[] = [
        {
            key: '1',
            name: '管理员',
            permissions: ['所有权限'],
            users: 3,
        },
        {
            key: '2',
            name: '编辑者',
            permissions: ['读取', '写入'],
            users: 5,
        },
    ];

    return (
        <Card title="角色管理" extra={<Button type="primary">添加角色</Button>}>
            <Table columns={columns} dataSource={data} />
        </Card>
    );
};

export default RolesPage;
